<template>
  <div>
    <!-- 视频播放器容器 -->
    <video
      id="videoPlayer"
      class="video-js vjs-default-skin"
      controls
      preload="auto"
      width="640"
      height="264"
    ></video>
  </div>
</template>

<script setup>
import { onMounted, onBeforeUnmount } from 'vue'
import videojs from 'video.js'
import 'video.js/dist/video-js.css' // 引入 video.js 的样式
import 'videojs-flash' // 引入 videojs-flash 插件

const props = defineProps({
  rtmpUrl: {
    type: String,
    required: true, // RTMP 流地址
  },
})
let player = null // video.js 播放器实例

// 初始化播放器
onMounted(() => {
  player = videojs('videoPlayer', {
    techOrder: ['flash', 'html5'], // 优先使用 flash 技术
    sources: [
      {
       src: props.rtmpUrl,
        type: 'rtmp/flv', // RTMP 流类型
      },
    ],
  })
})

// 销毁播放器
onBeforeUnmount(() => {
  if (player) {
    player.dispose() // 清理 video.js 实例
  }
})
</script>

<style>
/* 自定义样式 */
.video-js {
  background-color: #000;
}
</style>
